<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <span class="erweima">x</span>
    </div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        //利用DOM提供的方法获取元素
        //document. 等等  逻辑性不强、繁琐
        var erweima =document.querySelector('.erweima');
        //利用父子兄弟关系获得元素
        //节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)
        //元素节点nodeType为1
        //属性节点nodeType为2
        //为本节点nodeType为3(文本节点包含文字、空格、换行等)
        
        //得到的是最近的父亲节点
        var box = erweima.parentNode;
        console.log(box);
        
        //childNodes获得的节点包括元素节点和文本节点
        //一般不提倡使用childNodes
        var son = box.childNodes;
        console.log(son);
        
        //可以使用children
        var son = box.children;
        console.log(son);
        //firstChild 和 lastChild 都会获取到元素和文本节点
        var ul=document.querySelector('ul');
        console.log(ul.firstChild);
        console.log(ul.lastChild);

        //建议使用firstElementChile
        //ie9以上支持
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);
        //如果是低版本可以使用
        //也是实际开发的写法
        console.log(ul.children);
        
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length-1]);
        
        //nextSibling会得到文本节点
        //previousSiblling得到上一个节点
        //这两个方法IE9以上才支持
        console.log(box.nextSibling);
        //如果要获得元素节点 
        console.log(box.nextElementSibling);
        console.log(ul.previousElementSibling);
        
        //创建节点
        //document.createElement('')
        var span = document.createElement('span');
        //添加节点  把节点放入
        //node.appendChild()
        box.appendChild(span);
        //node.insertBefore(child.指定元素)
        //将一个节点添加到父节点的指定子节点前面
        var span2 = document.createElement('span');
        box.insertBefore(span2,span);

        //删除节点
        //node.removeChild()
        box.removeChild(span2);

        //复制节点
        //node.cloneNode();
        // ()为浅拷贝  只复制标签  不复制内容
        // (true)为深拷贝  标签和内容都复制
        var lili = ul.children[0].cloneNode();
        ul.insertBefore(lili,ul.children[0]);
    </script>
</body>
</html>